<template>
    <div class="friends flex fd-column">
        <div class="groupNav flex pl-s pr-s mb-xs">
            <ul class="flex f1 ai-center">
                <li class="active">好友</li>
                <li>群聊</li>
            </ul>
            <div class="flex ai-center relative" @click.stop>
                <i class="iconfont icon-plus" @click="friendReqShow = !friendReqShow"></i>
                <div class="point" v-show="userData.friendReq.length > 0"></div>
                <scroll-container ref="friendReqContain" class="friendReq" v-show="friendReqShow" @click.stop>
                    <p class="tips" v-show="userData.friendReq.length === 0">还没有人向你发出好友请求</p>
                    <ul>
                        <li class="flex" v-for="request in userData.friendReq" :key="request._id">
                            <div class="profile mr-s relative">
                                <div class="avatar" :style="{
                                    backgroundImage: `url(${request.profile.url})`,
                                    backgroundSize: request.profile.scale + 'px',
                                    backgroundPosition: `${request.profile.pos.x}px ${request.profile.pos.y}px`,
                                }">
                                    <img src="../../../assets/user-circle.png" alt="" v-if="request.profile.url === ''" style="width: 100%;">
                                </div>
                            </div>
                            <div class="f1 pt-xxs">
                                <h4 class="fc-white fs-s">{{request.username}}</h4>
                                <a @click="agreeFriReq(request._id)">添加</a>
                                <a @click="rejectFriReq(request._id)">拒绝</a>
                            </div>
                        </li>
                    </ul>
                </scroll-container>
            </div>
        </div>
        <scroll-container class="groupCtn f1" ref="friendsGroup">
            <ul class="content">
                <li>
                    <div class="group flex ai-center" @click="unfoldGroup('myFriends')">
                        <div class="angle flex jc-center ai-center">
                            <i class="iconfont" :class="groupStyle"></i>
                        </div>
                        我的好友
                        <span class="ml-xs">{{online}}/{{userData.friends.length}}</span>
                    </div>
                    <ul v-show="group.myFriends" @click="changeChatTarget">
                        <li class="session flex relative"
                            v-for="friend in userData.friends"
                            :key="friend._id">
                            <div class="profile mr-xs relative">
                                <div class="avatar" :style="{
                                    backgroundImage: `url(${friend.profile.url})`,
                                    backgroundSize: friend.profile.scale + 'px',
                                    backgroundPosition: `${friend.profile.pos.x}px ${friend.profile.pos.y}px`
                                }">
                                    <img src="../../../assets/user-circle.png" alt="" v-if="friend.profile.url === ''" style="width: 100%; height: 100%">
                                </div>
                            </div>
                            <div class="sessionCtn">
                                <h4 class="fc-white fs-s mt-xxs">{{friend.username}}</h4>
                                <p>{{friend.signature}}</p>
                            </div>
                            <div class="mask" :data-id="friend._id"></div>
                        </li>
                    </ul>
                </li>
            </ul>
        </scroll-container>
    </div>
</template>

<script>
    export default {
        name: "FriendsPanel",
        props: ['online'],
        data() {
            return {
                groupUnfold: false,
                friendReqShow: false,

                group: {
                    myFriends: false,
                }
            }
        },
        computed: {
            userData() {
                return this.$store.state.userData;
            },

            groupStyle() {
                return this.groupUnfold ? 'icon-angle-down' : 'icon-angle-right';
            },
        },
        inject: ['updateChatMessage'],
        methods: {
            unfoldGroup(target) {
                this.group[target] = !this.group[target];
                this.groupUnfold = !this.groupUnfold;
                this.$nextTick(this.$refs.friendsGroup.update);
            },

            updateFriReq(res) {
                let {target, add} = res;
                for (let i = 0; i < this.userData.friendReq.length; i++) {
                    if (this.userData.friendReq[i]._id === target._id) {
                        this.$store.commit('deleteFriReq', i);
                        //查看对方是否在线
                        this.$socket.emit('getTargetOnline', target._id);
                        break
                    }
                }
                if (add) {
                    this.$store.commit('addFriReq', target);
                }
            },

            agreeFriReq(targetID) {
                this.$socket.emit('agreeReq', targetID);
            },

            rejectFriReq(targetID) {
                this.$socket.emit('rejectReq', targetID);
            },

            updateFriList(target) {
                for (let i = 0; i < this.userData.friendReq.length; i++) {
                    if (this.userData.friendReq[i]._id === target._id) {
                        this.$store.commit('deleteFriReq', i);
                        break
                    }
                }
                this.$store.commit('addFriend', target);
                this.$nextTick(() => {
                    this.$refs.friendReqContain.update();
                    this.$refs.friendsGroup.update();
                });
            },

            changeChatTarget(e) {
                this.$store.commit('updateMessageActive', e.target.dataset.index);
                for (let item of this.userData.friends) {
                    if (item._id === e.target.dataset.id) {
                        this.$store.commit('updateChatTarget', item)
                        break;
                    }
                }
                this.updateChatMessage(e.target.dataset.id);
            },
        },
        mounted() {
            let that = this;
            window.addEventListener('click', function () {
                that.friendReqShow = false;
            })

            this.$socket.on('updateFriendReq', this.updateFriReq);
            this.$socket.on('updateFriList', this.updateFriList);
        }
    }
</script>

<style scoped lang="scss">
    .friends {
        overflow: hidden;

        .groupNav {
            flex-shrink: 0;

            li {
                margin-right: 0.80px;
                padding: 5px 20px;
                border-radius: 3px;
                cursor: pointer;

                &.active {
                    color: #222;
                    background-color: #777;
                }
            }

            .iconfont {
                padding: 3px 3px;
                cursor: pointer;
            }

            .iconfont:hover {
                border-radius: 2px;
                background-color: #555;
            }

            .point {
                position: absolute;
                right: -1px;
                bottom: 3px;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                background-color: #ed3714;
            }

            .friendReq {
                position: absolute;
                right: 0;
                top: 30px;
                width: 250px;
                height: 400px;
                border-radius: 5px;
                box-shadow: 0 0 15px 1px rgb(0 0 0 / 20%);
                background-color: #3a3c42;
                z-index: 1;

                .tips {
                    padding: 15px 20px;
                }

                ul {
                    padding: 15px 15px;

                    li {
                        margin: 0;
                        padding: 5px 0;
                        border-radius: 0;
                        cursor: default;

                        img {
                            width: 40px;
                            height: 40px;
                        }

                        a {
                            padding-right: 10px;
                            cursor: pointer;
                        }
                    }
                }
            }
        }

        .groupCtn {
            position: relative;
            overflow: hidden;

            .group {
                height: 40px;
                font-size: 13px;
                user-select: none;

                .angle {
                    width: 30px;
                    height: 30px;

                    .iconfont {
                        font-size: 13px;
                    }
                }
            }

            .group:hover {
                background-color: rgba(0, 0, 0, 0.2);
            }

            .profile {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                flex-shrink: 0;

                .avatar {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-repeat: no-repeat;
                }
            }

            .username {
                margin-bottom: 5px;
            }

            .session {
                padding: 8px 15px;
                cursor: pointer;

                img {
                    width: 45px;
                    height: 45px;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                }

                .sessionCtn {
                    p {
                        width: 230px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }

            .session:hover {
                background-color: rgba(0, 0, 0, 0.2);
            }
        }
    }
</style>